<template>
  <div class="tab-plan-task">
    <view-drop-down
      @handleChangeView="handleChangeView"
      :selectValue="value"
    ></view-drop-down>
    <plan-task-table v-if="value === '1'"></plan-task-table>
    <calendar-view ref='calendarViewRef' v-if="value === '2'" source="plan"></calendar-view>
  </div>
</template>
<script>
import { reactive, toRefs, ref, nextTick } from 'vue';

import ViewDropDown from './ViewDropDown.vue';
import PlanTaskTable from './PlanTaskTable.vue';
import CalendarView from './CalendarView.vue';

export default {
  name: 'tab-plan-task',
  props: {},
  components: {
    ViewDropDown,
    PlanTaskTable,
    CalendarView,
  },
  setup() {
    const calendarViewRef = ref(null);

    const state = reactive({
      value: '1',
    });

    const handleChangeView = val => {
      state.value = val;
    };

    const renderCalendar = () => {
      nextTick(() => {
        state.value === '2' && calendarViewRef.value.resizeRender();
      })
    }

    return {
      ...toRefs(state),
      handleChangeView,
      renderCalendar,
      calendarViewRef
    };
  },
};
</script>
<style lang="scss" scoped>
.tab-plan-task {
  height: 100%;
}
</style>